<template>
  <Card>
    <Row>
      <Form :model="detail" :label-width="150" ref="detail" :rules="ruleValidate">
        <h3 class="form-tip">
          系统消息详情
          <Icon style="margin-left: 5px;" type="compose"></Icon>
        </h3>
        <Row>
          <FormItem label="标题：" prop="title">
            <Input style="width: 250px;" v-model="detail.title"/>
          </FormItem>
        </Row>
        <Row>
          <FormItem label="封面图片：" prop="picture" >
            <img v-if="detail.picture" style="height:200px;width:300px" :src="detail.picture" />
            <qiniu-upload v-bind:imgUrl.sync='detail.picture'  :rate1="0.33" :rate2="3" buttonText="更改官方消息图片背景"/>
          </FormItem>
        </Row>
        <Row>
          <FormItem label="消息内容：" prop="content">
            <Editor :value.sync="detail.content"/>
          </FormItem>
        </Row>
        <FormItem>
          <Button type="primary" :loading="saveLoading" @click="save('detail')">{{ build ? '新增':'保存'}}
          </Button>
        </FormItem>
      </Form>
    </Row>
  </Card>
</template>

<script>
import { editSystemMessage, getSystemMessageDetail } from '@/api/sysMsg'
import qiniuUpload from '_c/upload/qiniuUpload.vue'
import Editor from '_c/editor/editor.vue'

export default {
  components: {
    qiniuUpload,
    Editor
  },
  name: 'sysMsg-detail',
  data () {
    return {
      detail: {
        title: '',
        content: '',
        picture: ''
      },
      ruleValidate: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '内容不能为空', trigger: 'blur' }
        ]
      },
      saveLoading: false,
      build: false
    }
  },
  methods: {
    getDetail () {
      getSystemMessageDetail(this.$route.query.id).then(data => {
        this.detail = data
      })
    },
    save (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let data = Object.assign({}, this.detail, { uid: this.$store.state.user.userId })
          editSystemMessage(data).then(() => {
            this.$Message.success('修改成功')
            this.saveLoading = false
            this.$router.go(-1)
          }, () => {
            this.saveLoading = false
          })
        } else {
          this.$Message.error('修改失败')
          this.saveLoading = false
        }
      })
      if (this.$route.query.id) {

      }
    }
  },
  mounted () {
    if (this.$route.query.id) {
      this.getDetail()
    } else {
      this.build = true
    }
  }
}
</script>

<style scoped>

</style>
